import { useTheme } from '@/store/settingsStore.ts';
import { useMemo } from 'react';
import { style, ThemeMode } from '@ycx/ui';

const AlertIcon = () => {
  const theme = useTheme();

  const color = useMemo(() => {
    return theme === ThemeMode.Light ? style.fontColorLevelOneLight : style.fontColorLevelOneDark;
  }, [theme]);
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path
        d="M3.5 8C3.5 5.51472 5.51472 3.5 8 3.5C10.4853 3.5 12.5 5.51472 12.5 8V12.5H3.5V8Z"
        stroke={color}
      />
      <path d="M3 15C3 14.4477 3.44772 14 4 14H12C12.5523 14 13 14.4477 13 15H3Z" fill={color} />
      <rect x="7.5" y="0.5" width="1" height="2" rx="0.5" fill={color} />
      <rect
        x="13.4141"
        y="3"
        width="1"
        height="2"
        rx="0.5"
        transform="rotate(45 13.4141 3)"
        fill={color}
      />
      <rect
        width="1"
        height="2"
        rx="0.5"
        transform="matrix(-0.707107 0.707107 0.707107 0.707107 2.70703 3)"
        fill={color}
      />
      <rect x="5" y="9" width="1" height="4" fill={color} />
    </svg>
  );
};

export default AlertIcon;
